import './List.css'
import React from 'react'
const data = {

    nameVal: '',
    // hot: 热度排序  time: 时间排序
    tabs: [
        {
            id: 1,
            name: '热度',
            type: 'hot'
        },
        {
            id: 2,
            name: '时间',
            type: 'time'
        }
    ],
    active: 'time',
    list: [
        {
            id: 1,
            author: '刘德华',
            comment: '给我一杯忘情水',
            time: '2021-10-10 09:09:00',
            img:
                'https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP.jpg?max_age=2592000',
            // 1: 点赞 0：无态度 -1:踩
            attitude: 1
        },
        {
            id: 2,
            author: '周杰伦',
            comment: '听妈妈的话',
            time: '2021-10-11 09:09:00',
            img:
                'https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000',
            // 1: 点赞 0：无态度 -1:踩
            attitude: 0
        },
        {
            id: 3,
            author: '陈奕迅',
            comment: '十年',
            time: '2021-10-11 10:09:00',
            img:
                'https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000',
            // 1: 点赞 0：无态度 -1:踩
            attitude: -1
        }
    ]
}






export default class List extends React.Component {


    // 简写
    state = {

        nameVal: '',
        // hot: 热度排序  time: 时间排序
        tabs: [
            {
                id: 1,
                name: '热度',
                type: 'hot'
            },
            {
                id: 2,
                name: '时间',
                type: 'time'
            }
        ],
        active: 'time',
        list: [
            {
                id: 1,
                author: '刘德华',
                comment: '给我一杯忘情水',
                time: '2021-10-10 09:09:00',
                img:
                    'https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP.jpg?max_age=2592000',
                // 1: 点赞 0：无态度 -1:踩
                attitude: 1
            },
            {
                id: 2,
                author: '周杰伦',
                comment: '听妈妈的话',
                time: '2021-10-11 09:09:00',
                img:
                    'https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000',
                // 1: 点赞 0：无态度 -1:踩
                attitude: 0
            },
            {
                id: 3,
                author: '陈奕迅',
                comment: '十年',
                time: '2021-10-11 10:09:00',
                img:
                    'https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000',
                // 1: 点赞 0：无态度 -1:踩
                attitude: -1
            }
        ]
    }




    handlerClick = () => {

        const { nameVal, list } = this.state

        let obj = {
            id: Math.random(),
            author: '陈奕迅2',
            comment: nameVal,
            time: '2021-10-11 10:09:00',
            img:
                'https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000',
            // 1: 点赞 0：无态度 -1:踩
            attitude: -1
        }
        let newList = [obj, ...list]
        this.setState({
            list: newList,
            nameVal: ''
        })
    }
    handlerChange = (e) => {
        //    更改数据 this.setState
        // const { nameVal } = this.state.data

        this.setState({


            nameVal: e.target.value

        })






    }

    delItem = (i) => {
        alert(i)
        const { list } = this.state

        let newList = list.filter((item, index) => index !== i)
        console.log(newList)
        this.setState({
            list: newList
        })

    }


    render () {
        console.log(this.state)
        const { list, tabs, nameVal } = this.state
        // console.log(list);
        // console.log(tabs)
        return (

            <div className="app">
                <header>
                    <ul className="ulBox">
                        {
                            tabs.map((item, index) => <li key={item.id}
                                className={index === 0 ? 'active' : ''}

                            > {item.name}</li>)

                        }

                    </ul>

                </header>

                {/* 发表评论 */}
                <div className='inputList'>
                    <img src="https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000" alt="" />
                    {/*  受控表单 */}
                    <input type="text"
                        value={nameVal}
                        onChange={this.handlerChange}
                    />
                    <button onClick={this.handlerClick}>发表评论</button>
                </div>



                <div className='body'>
                    <ul>
                        {





                            list.map((item, index) => {
                                return (
                                    <li className='listBox'>
                                        <img src={item.img} alt="" className='left' />
                                        <div className='right'>
                                            <div> {item.author}</div>
                                            <div>{item.comment}</div>
                                            <div>
                                                <span>{item.time}</span>
                                                <span> {item.attitude} 1 是点赞</span>
                                                <span></span>
                                                <button onClick={() => this.delItem(index)}> 删除</button>
                                            </div>
                                        </div>

                                    </li>

                                )
                            })


                        }
                    </ul>

                </div>

            </div>
        )



    }
}


